<template>
    <div class="components-container" style='height:100vh'>
        <div class='chart-container' v-loading="loading">
            <section class="detail-header">
                <div class="col-sm-12 console-title">
                    <h5><span class="title">线上平台流量监控 </span></h5>
                </div>
            </section>
            <section class="chartMain">
              <div class="chartShow">
                <div class="chartChildItem"  v-for="(item,index) in trafficArr" :key="index" >
                  <div class="chart-panel" :id="item.type" ></div>
                </div>
              </div>
                  
            </section>

        </div>
      </div>
</template>

<script>
import { trafficList } from '@/api/buissnesData'
import echarts from 'echarts'

export default {
  data() {
    return {
      trafficArr: [],
      loading: true
    }
  },
  mounted() {
    this.showCharts()
  },
  methods: {
    showCharts() {
      const _this = this
      trafficList().then(response => {
        this.trafficArr = response.data
        _this.trafficArr.forEach(function(element, index) {
          const id = element.type
          const objList = element.list
          const legendData = []
          const seriesData = []
          var _time = []
          objList.forEach(function(obj, index) {
            legendData.push(obj.domain)
            const json = JSON.parse(obj.data.substring(1, obj.data.length - 1))
            const timeData = []
            const time = []
            json.series[0].values.forEach(function(item) {
              var now = new Date()
              now.setTime(item[0])
              var year = now.getFullYear()
              var month = now.getMonth() + 1 > 9 ? now.getMonth() + 1 : '0' + (now.getMonth() + 1)
              var date = now.getDate() > 9 ? now.getDate() : '0' + now.getDate()
              var hour = now.getHours() > 9 ? now.getHours() : '0' + now.getHours()
              var minute = now.getMinutes() > 9 ? now.getMinutes() : '0' + now.getMinutes()
              var timeStr = year + '/' + month + '/' + date + ' \n ' + hour + ':' + minute
              time.push(timeStr)
              timeData.push(item[1])
            }, this)
            const seriesObj = { name: obj.domain, type: 'line', smooth: true, symbol: 'none', sampling: 'average', data: timeData }
            _time = time
            seriesData.push(seriesObj)
          })
          setTimeout(function() {
            _this.loading = false
            const product = echarts.init(document.getElementById(id))
            const option = {
              animation: false,
              title: {
                left: 'center',
                text: id,
                textStyle: {
                  fontSize: 15
                }
              },
              tooltip: {
                trigger: 'axis'
              },
              legend: {
                top: 'bottom',
                data: legendData
              },
              xAxis: {
                type: 'category',
                data: _time
              },
              yAxis: {
                type: 'value'
              },
              dataZoom: [{
                type: 'inside'
              }],
              grid: {
                left: 10,
                right: 10,
                height: 240,
                containLabel: true
              },
              series: seriesData
            }
            product.setOption(option)
          }, 1000)
        })
      })
    }
  }
}
</script>
<style  lang="scss" >
.detail-header{
    padding: 0 15px;
    margin-bottom: 10px;
    overflow: hidden;
    .console-title{
        padding: 16px 0px;
        min-height: 70px;
        border-bottom: 1px solid #eee;
        position: relative;
        h5{
            display: inline-block;
            text-indent: 2;
            border-left: 2px solid #88B7E0;
            margin: 8px 0;
            margin-right: 8px;
            vertical-align: top;
            .title{padding: 0 10px;}
            .btn-xs{
                font-size: 12px;
                padding: 2px 8px;
                height: 20px;
                line-height: 14px;
            }
        }
    }
}
.chart-container{
  width: 100%;
  height: 80%;
  .chartChose{
    margin-bottom: 20px;
    padding: 10px 0 20px;
    border-bottom:1px solid #eee;
    .setTime{
      .setTimebtn{
        background: #666;
        padding: 4px 10px;
        border: none;
        border-radius: 0;
      }
      .active{
        background: #222;
      }
      .datePicker{
        margin-left: 10px;
      }
    }
  }
  .chartShow{
    overflow: hidden;
  }
  .chartChildItem{
    height: 400px;
    width: 50%;
    left: 0;
    float: left;
    position: relative;
    .chart-panel{
      height: 350px;
      width: 100%;
      left: 0;
      position: relative;

    }
  }
}

</style> 